<template>
  <div class="titleDiv">
    <!-- 两端对齐 -->
    <van-row type="flex" justify="space-between">
      <van-col span="20">
        <van-field
          class="searchDiv"
          v-model="value"
          placeholder="好货内部价"
          :clearable="clearable"
          @keyup.enter="submitFn"
        >
          <template v-slot:left-icon>
            <van-icon name="search" class="searchIconLeft" />
          </template>
        </van-field>
      </van-col>
      <van-col span="3">
        <van-button class="cancelBtn" type="primary" size="mini" @click="gotoHome">
          取消
        </van-button>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "searchPage",
  data() {
    return {
      value: "",
      clearable: true,
    };
  },
  created() {},
  methods: {
    submitFn() {
      axios
        .get("http://localhost:8888/search", {
          params: {
            search_key: this.value,
          },
        })
        .then((_d) => {
          console.log(_d.data);
        });
    },
    gotoHome() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.titleDiv {
  padding: 0.2rem 0.4rem;
}
.cancelBtn {
  width: 0.98667rem;
  height: 0.53333rem;
  line-height: 0.53333rem;
  text-align: center;
  color: #333;
  border: 0;
  margin-left: 0.21333rem;
  font-size: 0.37333rem;
  background: #fff;
  margin-top: 0.1rem;
}
.searchDiv {
  border: 0;
  background-color: #f4f4f4;
  height: 0.74667rem;
  line-height: 0.45rem;
  border-radius: 4px;
  font-size: 0.37333rem;
}
.searchIconLeft {
  font-size: 0.5rem;
  margin-top: 0.05rem;
}
.search_close_r {
  /*display: none;*/
}
</style>